<!-- 20 -->
<template>
  <div class="page-wrap">
    <a-space class="common-button-group">
      <a-button type="primary" :loading="searchBtnLoading" @click="handleSearch">{{ $t('common_query') }}</a-button>
    </a-space>
    <t-query-form layout="inline"
      group="ChangeMachinePRMode"
      class="bottom-wrap"
      ref="queryForm"
      :rules="rules"
      :model="queryForm"
      >
        <a-form-item :label="$t('T9_shopId')" name="shopId">
          <a-select v-model:value="queryForm.shopId" class="select-width">
            <a-select-option value="ARRAY">ARRAY</a-select-option>
            <a-select-option value="CF">CF</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item :label="$t('T9_bayId')" name="bayId">
          <a-select v-model:value="queryForm.bayId" allow-clear class="select-width" :placeholder="$t('common_pleaseSelect')">
            <a-select-option v-for="item in bayIdList"
            :key="item" :value="item">
            {{item}}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item :label="$t('T9_eqpId')" name="eqpId">
          <a-select v-model:value="queryForm.eqpId" allow-clear class="select-width" :placeholder="$t('common_pleaseSelect')">
            <a-select-option v-for="item in options.eqpIdList"
            :key="item.value" :value="item.value">
            {{item.label}}
            </a-select-option>
          </a-select>
        </a-form-item>
    </t-query-form>
    <div class="page-wrap-main">
      <a-row type="flex" justify="space-between" align="middle" class="global-oper-row mt-1">
        <a-col :span="15" class="global-oper-row-title">{{ $t('T9_eqpList') }}</a-col>
        <a-col :span="8" class="global-oper-row-extra">
          <a-button>{{ $t('T9_toExcel') }}</a-button>
        </a-col>
      </a-row>
      <t-table
        class="page-wrap-main-table"
        :data="table.list"
        :loading="searchBtnLoading"
      >
        <t-column type="checkbox" width="60"></t-column>
        <t-column field="eqpId" :title="$t('T9_eqpId')" />
        <t-column field="detailEqpType" :title="$t('T9_detailEqpType')" />
        <t-column field="machinePrMode" :title="$t('T9_machinePrMode')" />
      </t-table>
      <div class='data-form page-wrap-main-bottom'>
        <a-form
          ref="dataForm"
          layout="inline"
          :colon="false"
          :model="dataForm"
          :rules="rules2"
        >
          <a-form-item :label="$t('T9_machinePRMode')" name="machinePRMode">
            <a-select v-model:value="dataForm.machinePRMode" class="select-width">
              <a-select-option v-for="item in options.machinePRModeList"
              :key="item.value" :value="item.value">
              {{item.label}}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item :label="$t('T9_comment')" name="comment" style="width:100%">
            <a-row type="flex" justify="space-between" align="middle">
              <a-col :span="21">
                <a-textarea allow-clear v-model:value="dataForm.comment" />
              </a-col>
              <a-col :span="2">
                <a-button type="primary" @click="showConfirm">{{ $t('t9_confirm') }}</a-button>
              </a-col>
            </a-row>
          </a-form-item>
        </a-form>
      </div>
    </div>
    <ModalPasswordConfirm v-model:value="visible" @ok="handleOk"/>
  </div>
</template>

<script>
  import { defineComponent } from 'vue'
  import ModalPasswordConfirm from '@/components/ModalPasswordConfirm.vue'
  import * as api from '@/api/common'
  import initOptionsMixin from '@/mixins/initOptionsMixin'

  export default defineComponent({
    name: 'ChangeMachinePRMode',
    components: { ModalPasswordConfirm },
    mixins: [initOptionsMixin],
    data() {
      return {
        visible: false,
        searchBtnLoading: false,
        table: {
          list: []
        },
        queryForm: {
          shopId: 'ARRAY',
          bayId: undefined,
          eqpId: undefined
        },
        options: {
          eqpIdList: [],
          machinePRModeList: []
        },
        dataForm: {
          machinePRMode: undefined,
          comment: ''
        },
        rules: {
          shopId: [{ required: true, message: this.$t('valid_required2'), trigger: 'change' }]
        },
        rules2: {
          machinePRMode: [{ required: true, message: this.$t('valid_required2'), trigger: 'change' }],
          comment: [
            { required: true, message: this.$t('valid_required'), trigger: 'blur' },
            { max: 500, message: this.$t('changePoint_maxLength', { n: 500 }), trigger: 'blur' }
          ]
        }
      }
    },
    computed: {
      bayIdList() {
        if (this.queryForm.shopId === 'ARRAY') {
          return ['PHL']
        } if (this.queryForm.shopId === 'CF') {
          return ['RGB', 'BM', 'PSH']
        }
        return []
      }
    },
    created() {
      this.initOptions([{ name: 'eqpId', params: { shopId: this.queryForm.shopId, bayId: '', version: '80023' } }])
    },
    watch: {
      'queryForm.shopId': {
        handler(shopId) {
          this.queryForm.bayId = undefined
          this.queryForm.eqpId = undefined
          this.initOptions([{ name: 'eqpId', params: { shopId, bayId: '', version: '80023' } }])
        }
      },
      'queryForm.bayId': {
        handler(bayId) {
          this.queryForm.eqpId = undefined
          this.initOptions([{ name: 'eqpId', params: { shopId: this.queryForm.shopId, bayId: bayId || '', version: '80023' } }])
        }
      }
    },
    methods: {
      handleSearch() {
        this.$refs.queryForm
          .validate()
          .then(() => {
            /*  if (this.searchBtnLoading) return
          this.searchBtnLoading = true
          api
            .getList()
            .then((res) => {
              this.searchBtnLoading = false
              console.log(res)
            })
            .catch((error) => {
              this.searchBtnLoading = false
              console.error(error)
            }) */
          })
          .catch((error) => {
            console.log('error', error)
          })
      },
      showConfirm() {
        this.$refs.dataForm.validate().then(() => {
          this.visible = true
        }).catch((error) => {
          console.log('error', error)
        })
      },
      handleOk() {
        this.visible = false
      }
    }
  })
</script>
<style lang='less' scoped>
.select-width {
	width: 120px;
}
</style>
